---
id: wrap
category: layout
title: Wrap
package: '@chakra-ui/layout'
description:
  "Wrap is a layout component used to add space between elements and wraps
  automatically if there isn't enough space."
---

## Import

```js
import { Wrap, WrapItem } from '@chakra-ui/react'
```

- **Wrap**: Wrap composes the `Box` component and renders a `<ul>` tag
- **WrapItem**: WrapItem composes the `Box` component and renders the HTML
  `<li>` tag

## Usage

Think of `Wrap` component as a flex box container with `flex-wrap` and `spacing`
support. It works really well with things like dialog buttons, tags, and chips.

In the example below, you see that the last `Box` wrapped to the next line.

```jsx
<Wrap>
  <WrapItem>
    <Center w='180px' h='80px' bg='red.200'>
      Box 1
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w='180px' h='80px' bg='green.200'>
      Box 2
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w='180px' h='80px' bg='tomato'>
      Box 3
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w='180px' h='80px' bg='blue.200'>
      Box 4
    </Center>
  </WrapItem>
</Wrap>
```

### Change the spacing

Pass the `spacing` prop to apply consistent spacing between each child, even if
it wraps.

> Pro Tip: You can pass responsive values for the spacing.

```jsx
<Wrap spacing='30px'>
  <WrapItem>
    <Center w='180px' h='80px' bg='red.200'>
      Box 1
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w='180px' h='80px' bg='green.200'>
      Box 2
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w='180px' h='80px' bg='tomato'>
      Box 3
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w='180px' h='80px' bg='blue.200'>
      Box 4
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w='180px' h='80px' bg='blackAlpha.500'>
      Box 5
    </Center>
  </WrapItem>
</Wrap>
```

### Change the alignment

Pass the `align` prop to change the alignment of the child along the cross axis.

```jsx
<Wrap spacing='30px' align='center'>
  <WrapItem>
    <Center w='180px' h='80px' bg='red.200'>
      Box 1
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w='180px' h='40px' bg='green.200'>
      Box 2
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w='120px' h='80px' bg='tomato'>
      Box 3
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w='180px' h='40px' bg='blue.200'>
      Box 4
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w='180px' h='80px' bg='blackAlpha.500'>
      Box 5
    </Center>
  </WrapItem>
</Wrap>
```

Pass the `justify` prop to change the alignment of the child along the main
axis.

```jsx
<Wrap spacing='30px' justify='center'>
  <WrapItem>
    <Center w='180px' h='80px' bg='red.200'>
      Box 1
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w='180px' h='80px' bg='green.200'>
      Box 2
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w='120px' h='80px' bg='tomato'>
      Box 3
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w='180px' h='80px' bg='blue.200'>
      Box 4
    </Center>
  </WrapItem>
  <WrapItem>
    <Center w='180px' h='80px' bg='blackAlpha.500'>
      Box 5
    </Center>
  </WrapItem>
</Wrap>
```
